<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>主题使用指南 | Top 的博客 ｜ Top Blog</title>
    <meta name="generator" content="VuePress 1.9.9">
    <link rel="icon" href="/blog/favicon.ico">
    <meta name="description" content="个人博客">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/blog/assets/css/0.styles.247a7745.css" as="style"><link rel="preload" href="/blog/assets/js/app.a26f0e63.js" as="script"><link rel="preload" href="/blog/assets/js/6.dddf2d67.js" as="script"><link rel="preload" href="/blog/assets/js/8.00a36f19.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.ad9b1204.js"><link rel="prefetch" href="/blog/assets/js/11.9d7155e6.js"><link rel="prefetch" href="/blog/assets/js/12.878de5aa.js"><link rel="prefetch" href="/blog/assets/js/13.d4356719.js"><link rel="prefetch" href="/blog/assets/js/14.228aba71.js"><link rel="prefetch" href="/blog/assets/js/15.d31bc4e7.js"><link rel="prefetch" href="/blog/assets/js/16.0d4d14f2.js"><link rel="prefetch" href="/blog/assets/js/17.669b199a.js"><link rel="prefetch" href="/blog/assets/js/2.8a74ff50.js"><link rel="prefetch" href="/blog/assets/js/3.e32a4c38.js"><link rel="prefetch" href="/blog/assets/js/4.b134dc4c.js"><link rel="prefetch" href="/blog/assets/js/5.511daf51.js"><link rel="prefetch" href="/blog/assets/js/7.1919884f.js"><link rel="prefetch" href="/blog/assets/js/9.876e8c50.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.247a7745.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div id="global-layout" data-v-7f2e4136><header class="header-container" style="background-size:cover;background-repeat:no-repeat;background-position:center;background-attachment:scroll;background-image:url(/blog/post-bg.jpeg);" data-v-93921ff8 data-v-7f2e4136><nav class="navbar" style="position:absolute;opacity:1;transition:all 0.5s ease-in-out;" data-v-93921ff8><a href="/blog/" class="navbar-link router-link-active">
    Top Blog
  </a> <ul class="navbar-links"><li><a href="/blog/" class="router-link-active">
        HOME
      </a></li><li><a href="/blog/about/">
        ABOUT
      </a></li><li><a href="/blog/tags/">
        TAGS
      </a></li></ul> <div id="nav-icon"><span></span><span></span><span></span></div></nav> <div class="header-title" data-v-93921ff8 data-v-93921ff8><h1 data-v-93921ff8>主题使用指南</h1> <p data-v-93921ff8></p></div></header> <div class="container" data-v-b3fda33c data-v-7f2e4136><main class="main" style="width:60%;" data-v-b3fda33c><div class="post" data-v-b3fda33c data-v-b3fda33c><article class="main-div"><div class="post-content content content__default"><p>本篇博客主要是介绍本博客主题如何使用。
</p> <h2 id="速览"><a href="#速览" class="header-anchor">#</a> 速览</h2> <ul><li>这是一款 Vuepress 主题，集成了博客所需的分类、TAG墙、分页、评论等功能。</li> <li>主题追求极简，配置上手简单，适配移动端。</li> <li><a href="www.ydlcq.cn">预览地址</a></li> <li><a href="https://github.com/youdeliang/vuepress-theme-melodydl" target="_blank" rel="noopener noreferrer">GitHub地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>博客效果展示：</li></ul> <p><img src="https://user-gold-cdn.xitu.io/2020/5/2/171d4a46cd1c4caf?w=599&amp;h=287&amp;f=gif&amp;s=1994152" alt=""></p> <h2 id="主题使用"><a href="#主题使用" class="header-anchor">#</a> 主题使用</h2> <h3 id="安装主题"><a href="#安装主题" class="header-anchor">#</a> 安装主题</h3> <p>创建一个新的项目 my-blog：</p> <div class="language- extra-class"><pre class="language-text"><code>mkdir my-blog
cd my-blog
</code></pre></div><p>初始化 yarn 或 npm ：</p> <div class="language- extra-class"><pre class="language-text"><code>yarn init  或 npm init -y
</code></pre></div><p>安装 vuepress 和 vuepress-theme-melodydl：</p> <div class="language- extra-class"><pre class="language-text"><code>yarn add vuepress vuepress-theme-melodydl
或
npm install vuepress vuepress-theme-melodydl
</code></pre></div><p>创建 src/_posts 文件夹和 Vuepress 配置文件，项目结构大致为：</p> <div class="language- extra-class"><pre class="language-text"><code>my-blog
├── src # Blog 源文件目录
│   ├── .vuepress # Vuepress 目录
│   │   └── public # Vuepress 静态资源文件
│   │   └── config.js # Vuepress 配置文件
│   └── about # About 页面 文件夹
│   │   ├── index.md  # about 页面内容文件
│   └── _posts # 博客文件夹
│       ├── xxx.md
│       ...
└── package.json
</code></pre></div><p>在 package.json 加入 script 字段：</p> <div class="language- extra-class"><pre class="language-text"><code>{
  &quot;scripts&quot;: {
    &quot;dev&quot;: &quot;vuepress dev src&quot;,
    &quot;build&quot;: &quot;vuepress build src&quot;
  }
}
</code></pre></div><h3 id="配置主题"><a href="#配置主题" class="header-anchor">#</a> 配置主题</h3> <p>在 src/.vuepress/config.js 中配置 Vuepress 和主题：</p> <details><summary>点击展示配置示例</summary> <div class="language- extra-class"><pre><code>module.exports = {
    // 网站 Title
      title: 'Top 的博客 ｜ Top Blog',
      
      // 网站描述
      description: '个人博客',
      
      // 网站 favicon 图标设置等
      head: [
        ['link', { rel: 'icon', href: '/favicon.ico' }],
        ['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no' }]
      ],
      
      // 使用的主题
      theme: 'melodydl',
      
      // 主题配置
      themeConfig: {
        title: 'Top Blog',

    // 个人信息（没有或不想设置的，删掉对应字段即可）
    personalInfo: {
    
    // 名称
      name: 'melodydl',
      
      // 头像 public文件夹下
      avatar: '/avatar-top.jpeg',
      
      // 头部背景图
      headerBackgroundImg: '/avatar-bg.jpeg',
      
      // 个人简介 (支持 HTML)
      description: 'In me the tiger sniffs the rose&lt;br/&gt;心有猛虎，细嗅蔷薇',
      
       // 电子邮箱
      email: 'facecode@foxmail.com',
      
      // 所在地
      location: 'Shanghai, China'
    },
    // 顶部导航栏内容
    nav: [ 
      {text: 'HOME', link: '/' },
      {text: 'ABOUT', link: '/about/'},
      {text: 'TAGS', link: '/tags/'}      
    ],
    
    // 首页头部标题背景图设置，图片直接放在 public 文件夹下
    header: {
      home: {
        title: 'Top Blog', 
        subtitle: '好好生活，慢慢相遇', 
        headerImage: '/home-bg.jpeg'
      },
      
      // tag页面头部标题背景图设置，图片直接放在 public 文件夹下
      tags: {
        title: 'Tags', 
        subtitle: '遇见你花光了我所有的运气', 
        headerImage: '/tags-bg.jpg'
      },
      
      // 文章详情头部背景图
      postHeaderImg: '/post-bg.jpeg',
    },
    
    // 社交平台帐号信息 
    sns: {
      // 简书账号和链接
      &quot;jianshu&quot;: { 
        account: &quot;jianshu&quot;, 
        link: &quot;https://www.jianshu.com/u/5dddaee8f351&quot;, 
      },
      
      // 新浪 账号和链接
      &quot;weibo&quot;: { 
        account: &quot;&quot;,
        link: &quot;&quot;
      },
      
      // 知乎 帐号和链接
      &quot;zhihu&quot;: { 
        account: &quot;zhihu&quot;,
        link: &quot;https://www.zhihu.com/people/sheng-tang-de-xing-kong&quot;
      },
      
      // Github 帐号和链接
      &quot;github&quot;: { 
        account: &quot;github&quot;,
        link: &quot;https://github.com/youdeliang&quot;
      }
    },
    // 底部 footer 的相关设置 
    footer: {
      // gitbutton  配置
      gitbtn: {
        // 仓库地址
        repository: &quot;https://ghbtns.com/github-btn.html?user=youdeliang&amp;repo=vuepress-theme-top&amp;type=star&amp;count=true&quot;,
        frameborder: 0,
        scrolling: 0,
        width: &quot;80px&quot;,
        height: &quot;20px&quot;
      },
      
      // 添加自定义 footer
      custom: `Copyright &amp;copy; Top Blog 2020 &lt;br /&gt; 
        Theme By &lt;a href=&quot;https://www.vuepress.cn/&quot; target=&quot;_blank&quot;&gt;VuePress&lt;/a&gt;
        | &lt;a href=&quot;https://www.github.com/youdeliang/&quot; target=&quot;_blank&quot;&gt;youdeliang&lt;/a&gt;`
    },
    
    // 分页配置
    pagination: {
      // 每页文章数量
      perPage: 5,
    },
    
    // vssue 评论配置, 如果不需要，可以设置 comments: false
    comments: {    
      owner: 'youdeliang',
      repo: 'vuepress-theme-melodydl',
      clientId: 'dfba8ecad544784fec1f',
      clientSecret: '1358ac11bc8face24f598601991083e27372988d',
      autoCreateIssue: false,
    },
  }
}
</code></pre></div></details> <h3 id="vssue-评论插件"><a href="#vssue-评论插件" class="header-anchor">#</a> Vssue 评论插件</h3> <p>如果你知道 Gitment 和 Gitalk，那么 Vssue 其实和它们实现的功能没什么区别 —— 在 Github 的 Issue 系统中存储评论，在你的页面上发表和展示评论，还可以编辑和删除评论，提供了 Vuepress 的插件（最初的动力就是给自己的 Vuepress 博客开启评论）。</p> <p>Vssue 评论插件使用可以查看文档手册。<a href="https://vssue.js.org/guide/" target="_blank" rel="noopener noreferrer">传送门<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h3 id="about页面配置"><a href="#about页面配置" class="header-anchor">#</a> about页面配置</h3> <div class="language- extra-class"><pre class="language-text"><code>---
layout: about 
title: About
subtitle: 你可以很好，但你无需完美
headerImage: /about-bg.jpg # public 文件夹下的图片
---

下面为个人信息等内容...
</code></pre></div><h3 id="创建博文"><a href="#创建博文" class="header-anchor">#</a> 创建博文</h3> <p>在 src/_posts 下创建 md 文件</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;!-- _posts/2019-04-01-JS异步编程方案总结.md --&gt;
---
title: &quot;JS异步编程方案总结&quot;
date: 2019-04-01
tags:
  - Promise
  - JavaScript
---

本篇博客主要是对 Javcscript 异步编程方案总结

more 上面的内容是摘要，将显示在目录中。

&lt;!-- more --&gt;

more 下面的内容只有浏览这篇文章时才会完全展示，不会显示在目录中。

</code></pre></div><p>运行相应 script 生成你的博客网站</p> <div class="language- extra-class"><pre class="language-text"><code># 开发
npm run dev
# 构建
npm run build
</code></pre></div><h3 id="使用-github-pages-部署"><a href="#使用-github-pages-部署" class="header-anchor">#</a> 使用 GitHub pages 部署</h3> <p>部署具体步骤可以参考 Vuepress 官方文档。 <a href="https://vuepress.vuejs.org/zh/guide/deploy.html#github-pages" target="_blank" rel="noopener noreferrer">传送门<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="最后"><a href="#最后" class="header-anchor">#</a> 最后</h2> <p>如果觉得主题好用的话，欢迎点赞和 <a href="https://github.com/youdeliang/vuepress-theme-melodydl" target="_blank" rel="noopener noreferrer">Star<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，你的鼓励是对我莫大的支持，谢谢🙏。</p></div></article> <div class="main-div vssue"><!----></div></div></main> <aside class="aside" data-v-b3fda33c data-v-b3fda33c><div class="info-card main-div" data-v-1311ce9e data-v-b3fda33c><div class="info-card-header" style="background-size:cover;background-repeat:no-repeat;background-position:center;background-attachment:scroll;background-image:url(/blog/avatar-bg.jpeg);" data-v-1311ce9e><img src="/blog/avatar-top.jpeg" alt="melodydl" class="info-avatar" data-v-1311ce9e></div> <div class="info-card-body" data-v-1311ce9e><section class="info-name" data-v-1311ce9e>
      melodydl
    </section> <section class="info-desc" data-v-1311ce9e>In me the tiger sniffs the rose<br/>心有猛虎，细嗅蔷薇</section> <section class="info-contact" data-v-1311ce9e><section data-v-1311ce9e><span data-v-1311ce9e data-v-1311ce9e><svg class="icon" style="font-size:1em;" data-v-1311ce9e data-v-1311ce9e><use xlink:href="#icon-location" data-v-1311ce9e data-v-1311ce9e></use></svg><span class="info-text" data-v-1311ce9e data-v-1311ce9e>
          Shanghai, China
        </span></span></section> <!----> <section data-v-1311ce9e><span data-v-1311ce9e data-v-1311ce9e><svg class="icon" style="font-size:1em;" data-v-1311ce9e data-v-1311ce9e><use xlink:href="#icon-email" data-v-1311ce9e data-v-1311ce9e></use></svg><span class="info-text" data-v-1311ce9e data-v-1311ce9e>
          facecode@foxmail.com
        </span></span></section></section></div> <div class="info-card-footer" data-v-1311ce9e><p class="footer-sns-link" data-v-1311ce9e><a target="_blank" href="https://blog.csdn.net/weixin_44002432" class="sns-link" data-v-1311ce9e><span class="sns-icon" data-v-1311ce9e data-v-1311ce9e><svg class="icon" style="font-size:35px;" data-v-1311ce9e data-v-1311ce9e><use xlink:href="#icon-csdn" data-v-1311ce9e data-v-1311ce9e></use></svg></span></a><a target="_blank" href="https://weibo.com/u/5656925978" class="sns-link" data-v-1311ce9e><span class="sns-icon" data-v-1311ce9e data-v-1311ce9e><svg class="icon" style="font-size:35px;" data-v-1311ce9e data-v-1311ce9e><use xlink:href="#icon-weibo" data-v-1311ce9e data-v-1311ce9e></use></svg></span></a><a target="_blank" href="https://juejin.im/user/5ce784a0f265da1b8333673c" class="sns-link" data-v-1311ce9e><span class="sns-icon" data-v-1311ce9e data-v-1311ce9e><svg class="icon" style="font-size:35px;" data-v-1311ce9e data-v-1311ce9e><use xlink:href="#icon-juejin" data-v-1311ce9e data-v-1311ce9e></use></svg></span></a><a target="_blank" href="https://www.zhihu.com/people/sheng-tang-de-xing-kong" class="sns-link" data-v-1311ce9e><span class="sns-icon" data-v-1311ce9e data-v-1311ce9e><svg class="icon" style="font-size:35px;" data-v-1311ce9e data-v-1311ce9e><use xlink:href="#icon-zhihu" data-v-1311ce9e data-v-1311ce9e></use></svg></span></a><a target="_blank" href="https://github.com/youdeliang" class="sns-link" data-v-1311ce9e><span class="sns-icon" data-v-1311ce9e data-v-1311ce9e><svg class="icon" style="font-size:35px;" data-v-1311ce9e data-v-1311ce9e><use xlink:href="#icon-github" data-v-1311ce9e data-v-1311ce9e></use></svg></span></a></p></div></div> <div class="post-toc main-div aside-toc" style="position:relative;top:0;width:0px;" data-v-b3fda33c><h4>- CATALOG</h4> <div class="post-nav-toc"><ul><li><a href="/blog/posts/2020/05/02/%E4%B8%BB%E9%A2%98%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97.html#速览">速览</a></li><li><a href="/blog/posts/2020/05/02/%E4%B8%BB%E9%A2%98%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97.html#主题使用">主题使用</a><ul><li><a href="/blog/posts/2020/05/02/%E4%B8%BB%E9%A2%98%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97.html#安装主题">安装主题</a></li><li><a href="/blog/posts/2020/05/02/%E4%B8%BB%E9%A2%98%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97.html#配置主题">配置主题</a></li><li><a href="/blog/posts/2020/05/02/%E4%B8%BB%E9%A2%98%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97.html#vssue-评论插件">Vssue 评论插件</a></li><li><a href="/blog/posts/2020/05/02/%E4%B8%BB%E9%A2%98%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97.html#about页面配置">about页面配置</a></li><li><a href="/blog/posts/2020/05/02/%E4%B8%BB%E9%A2%98%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97.html#创建博文">创建博文</a></li><li><a href="/blog/posts/2020/05/02/%E4%B8%BB%E9%A2%98%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97.html#使用-github-pages-部署">使用 GitHub pages 部署</a></li></ul></li><li><a href="/blog/posts/2020/05/02/%E4%B8%BB%E9%A2%98%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97.html#最后">最后</a></li></ul></div></div></aside></div> <footer class="footer" data-v-7f2e4136><p class="footer-sns-link"><a target="_blank" href="https://blog.csdn.net/weixin_44002432" class="sns-link"><span class="sns-icon"><svg class="icon" style="font-size:40px;"><use xlink:href="#icon-csdn"></use></svg></span></a><a target="_blank" href="https://weibo.com/u/5656925978" class="sns-link"><span class="sns-icon"><svg class="icon" style="font-size:40px;"><use xlink:href="#icon-weibo"></use></svg></span></a><a target="_blank" href="https://juejin.im/user/5ce784a0f265da1b8333673c" class="sns-link"><span class="sns-icon"><svg class="icon" style="font-size:40px;"><use xlink:href="#icon-juejin"></use></svg></span></a><a target="_blank" href="https://www.zhihu.com/people/sheng-tang-de-xing-kong" class="sns-link"><span class="sns-icon"><svg class="icon" style="font-size:40px;"><use xlink:href="#icon-zhihu"></use></svg></span></a><a target="_blank" href="https://github.com/youdeliang" class="sns-link"><span class="sns-icon"><svg class="icon" style="font-size:40px;"><use xlink:href="#icon-github"></use></svg></span></a></p> <div class="copyright"><span id="custom">Copyright &copy; Top Blog 2020 <br /> 
        Theme By <a href="https://www.vuepress.cn/" target="_blank">VuePress</a>
        | <a href="https://www.github.com/youdeliang/" target="_blank">youdeliang</a></span> <iframe src="https://ghbtns.com/github-btn.html?user=youdeliang&amp;repo=vuepress-theme-melodydl&amp;type=star&amp;count=true" frameborder="0" scrolling="0" width="80px" height="20px" class="footer-btn" style="margin-left: 2px; margin-bottom:-5px;"></iframe></div></footer></div><div class="global-ui"><!----><!----></div></div>
    <script src="/blog/assets/js/app.a26f0e63.js" defer></script><script src="/blog/assets/js/6.dddf2d67.js" defer></script><script src="/blog/assets/js/8.00a36f19.js" defer></script>
  </body>
</html>
